<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>滑动登陆表单</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
	<link rel="stylesheet" href="./style.css">
	<script>
		function postAndRedirect(url, data) {
			console.log(url);
			console.log(data);
			// var data = {"nickname": "testAdmin2", "password": "zpf##*#00115445sd", "username": "admin02"}
			// 发送POST请求
			fetch(url, {
				method: 'POST',
				headers: {
					'Content-Type': 'application/json'
				},
				body: data
			}).then(response => {
				// 请求成功后，跳转到目标页面
				if (response.ok) {
					alert('登录成功');
					window.location.href = '6.png';
				}
			}).catch(error => {
				console.error('Error:', error);
			});
		}
		function formToJSON1() {
			var form = document.getElementById('form1'); // 获取表单元素
			var elements = form.elements; // 获取所有表单控件

			var fields = {}; // 创建一个空对象
			for (var i = 0; i < elements.length; i++) {
				var field = elements[i]; // 获取表单控件
				if (field.name && field.value) {
					fields[field.name] = field.value; // 设置对象属性
				}
			}

			var json = JSON.stringify(fields); // 将对象转换为JSON字符 串
			console.log(json); // 打印JSON字符串
			return json;
			// 可以在这里发送json到服务器
		}
		function formToJSON2() {
			var form = document.getElementById('form2'); // 获取表单元素
			var elements = form.elements; // 获取所有表单控件

			var fields = {}; // 创建一个空对象
			for (var i = 0; i < elements.length; i++) {
				var field = elements[i]; // 获取表单控件
				if (field.name && field.value) {
					fields[field.name] = field.value; // 设置对象属性
				}
			}

			var json = JSON.stringify(fields); // 将对象转换为JSON字符 串
			console.log(json); // 打印JSON字符串
			return json;
			// 可以在这里发送json到服务器
		}
	</script>
</head>

<body>
	<div class="container right-panel-active">
		<!-- Sign Up -->
		<div class="container__form container--signup">
			<form action="http://localhost:8080/v1/users/reg" class="form" id="form1" method="post">
				<h2 class="form__title">Sign Up</h2>
				<input type="text" placeholder="Username" class="input" name="username" />
				<input type="password" placeholder="Password" class="input" name="password" />
				<input type="text" placeholder="Nickname" class="input" name="nickname"/>
				<button onclick="postAndRedirect('http://localhost:8080/v1/users/reg',formToJSON1())" class="btn">Sign Up</button>
			</form>
		</div>

		<!-- Sign In -->
		<div class="container__form container--signin">
			<form action="http://localhost:8080/v1/users/login" class="form" id="form2">
				<h2 class="form__title">Sign In</h2>
				<input type="text" placeholder="Username" class="input" name="username" />
				<input type="password" placeholder="Password" class="input" name="password" />
				<a href="#" class="link">Forgot your password?</a>
				<button onclick="postAndRedirect('http://localhost:8080/v1/users/login',formToJSON2())" class="btn">Sign In</button>
			</form>
		</div>

		<!-- Overlay -->
		<div class="container__overlay">
			<div class="overlay">
				<div class="overlay__panel overlay--left">
					<button class="btn" id="signIn">Sign In</button>
				</div>
				<div class="overlay__panel overlay--right">
					<button class="btn" id="signUp">Sign Up</button>
				</div>
			</div>
		</div>
	</div>
	<!-- partial -->
	<script src="./script.js"></script>


</body>

</html>